<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="less/bootstrap.css" rel="stylesheet">
    <link href="app.css" rel="stylesheet">
</head>
<body>

<!--
@side-nav:右边小按钮导航条
@onePage:第一屏
@twoPage:第二屏
-->

<!-- 右边的导航 -->
<div class="side-nav" role="navigation">
    <ul class="nav-side-nav">
        <li><a class="tooltip-side-nav" href="#onePage"></a></li>
        <li><a class="tooltip-side-nav" href="#twoPage"></a></li>
        <li><a class="tooltip-side-nav" href="#three-page"></a></li>
        <li><a class="tooltip-side-nav" href="#fourPage"></a></li>
        <li><a class="tooltip-side-nav" href="#fivePage"></a></li>
    </ul>
</div>

<div class="one-page" id="onePage">
    <div class="one-page-bg" id="onePageBg"></div>
    <div class="container">
        <div class="row">
            <div class="title-text">
                <div class="col-md-12 head-font-size">
                    <h1 class="head-h1-content">
                        极客学院<br/>
                        在这里你可以学习<br/>
                        到你想要的
                    </h1>
                    <p style="margin-top:50px;line-height: 33px">
                        只有你有耐心，相信程序对你而言，小菜一碟，你一定可以顺利那下的<br/>
                        只有你有耐心，相信程序对你而言，小菜
                    </p>
                    <p class="btn-app-store">
                        <a class="btn btn-success btn-lg" href="#">立即注册，开始学习</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="two-page" id="twoPage">
    <div class="two-page-text">
        <h1 class="two-page-text-h1">
            选择你的第一节课程进行学习<img src="images/android.png">
        </h1>
    </div>
    <div class="row">
        <div class="two-page-courses col-md-4">
            <a href="#">
                <img src="images/javascript.png" style="width:100%;">
                <div class="class-icon">
                    <h3>认真学习啊</h3>
                    <h1><strong>学习这个课程</strong></h1>
                </div>
            </a>
        </div>
        <div class="two-page-courses col-md-4">
            <a href="#">
                <img src="images/java.png" style="width:100%;">
                <div class="class-icon">
                    <h3>认真学习啊</h3>
                    <h1><strong>学习这个课程</strong></h1>
                </div>
            </a>
        </div>
        <div class="two-page-courses col-md-4">
            <a href="#">
                <img src="images/php.png" style="width:100%;">
                <div class="class-icon">
                    <h3>认真学习啊</h3>
                    <h1><strong>学习这个课程</strong></h1>
                </div>
            </a>
        </div>
    </div>
    <div class="two-page-btn">
        <a id="twoPageEasy" href="#" class="btn btn-success btn-lg">如果你想学习，快点击我</a>
    </div>
</div>

<!--three page-->
<div class="three-page" id="three-page">
    <div class="three-page-content">
        <div class="three-page-content-text">
            <h1>新手机快来拿呗</h1>
            <p>新手机快来拿呗新手机快来拿，呗新手机快来拿呗新手机快来，拿呗新手机快来拿呗<br/>拿呗新手机快来拿呗,拿呗新手机快来拿呗</p>
        </div>
        <button class="btn btn-default three-page-btn">赶快点击我</button>
    </div>
</div>

<div class="four-page" id="fourPage">
    <div class="container" style="width:70%;">
        <div class="coursexingqing-text">
            <h1>KFC过年最新优惠套餐</h1>
            <p>怎样才能做到最快的学习，你猜嘛？</p>
        </div>
        <!--<div id="carousel-example-generic" class="carousel slide" data-interval="5000">-->
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000"
                 data-pause="hover" data-keyboard="true">
            <ol class="carousel-indicators" style="margin-top: 200px;">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="images/carousel-01.jpg">
                </div>
                <div class="item">
                    <img src="images/carousel-02.jpg">
                </div>
                <div class="item">
                    <img src="images/carousel-03.jpg">
                </div>
            </div>
            <a class="carousel-control left" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="carousel-control right" href="#carousel-example-generic" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>
</div>

<div class="five-page">
    <div class="five-page-bg" id="fivePage">
        <div class="container">
            <div class="footer-text">
                <h1>你还在等待呢。赶快动手吧</h1>
            </div>
            <div class="footer-btn-center">
                <div class="row">
                    <a href="#">
                        <div class="col-md-4">
                            <img src="images/footer-icon1.png" class="footer-btn que-ye-icon">
                        </div>
                    </a>
                    <a href="#">
                        <div class="col-md-4">
                            <img src="images/footer-icon2.png" class="footer-btn que-ye-icon">
                        </div>
                    </a>
                    <a href="#">
                        <div class="col-md-4">
                            <img src="images/footer-icon3.png" class="footer-btn que-ye-icon">
                        </div>
                    </a>
                </div>
            </div>
            <div class="footer-text-btn">
                <button type="button" class="btn btn-success btn-lg" style="font-size: 25px;">
                    你还在看？ 在看？ 在看我就吃了你。
                </button>
                <p class="footer-text-btn-text">
                    只有你有耐心，相信程序对你而言，小菜一碟，你一定可以顺利那下的
                </p>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>